<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="main">
			<u-sticky>
				<view class="top">
					<view class="type_tags">
						<u-subsection :list="typeTags" :current="typeIndex" keyName="name" @change="tagClick"></u-subsection>
					</view>
				</view>
			</u-sticky>
			<view class="lists">
				<view v-if="info.length > 0" v-for="(item, index) in info" :key="index" class="items">
					<view class="titles">
						<view class="lefts">
							<text class="names">{{item.nickname}}</text>
						</view>
						<text v-if="item.process == 2 && customerinfo.is_typs == 5" class="states reds">待沟通</text>
						<text v-if="item.process == 1 && customerinfo.is_typs == 5" class="states greens">已沟通</text>
						<text v-if="item.is_allot == 1 && customerinfo.is_typs == 4" class="states greens">已分配</text>
						<text v-if="item.is_allot == 2 && customerinfo.is_typs == 4" class="states reds">待分配</text>
					</view>
					<u-line></u-line>
					<view class="applys">
						<view class="titles">
							地址信息
						</view>
						<u-line></u-line>
						<view class="item-con">
							<view class="name">
								<text>{{item.nickname}}</text>
								<text>{{item.hidPhone}}</text>
							</view>
							<u-line dashed=""></u-line>
							<view class="address">
								{{item.address}}
							</view>
						</view>
					</view>
					<u-line></u-line>
					<view v-if="item.is_allot == 1" class="operations">
						<view class="lefts">
							<text>分配业务</text>
						</view>
						<view class="rights">
							<text>{{item.allotAgent}}</text>
						</view>
					</view>
					<u-line v-if="item.is_allot == 1"></u-line>
					<view v-if="item.remark != '' && item.remark != undefined" class="feedback">
						<view class="titles">
							反馈信息
						</view>
						<u-line></u-line>
						<view class="cons">
							{{item.remark}}
						</view>
					</view>
					<u-line v-if="item.remark != '' && item.remark != undefined"></u-line>
					<view class="operation">
						<view class="lefts">
							<text>{{item.standsTime}}</text>
						</view>
						<view class="rights">
							<!-- #ifdef APP -->
							<view v-if="customerinfo.is_typs==3 && item.gift_code == ''" class="btn reds" @click="bindsGiftApp(item)">
								绑定礼品
							</view>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<view v-if="customerinfo.is_typs==3 && item.gift_code == ''" class="btn reds" @click="bindsGift(item)">
								绑定礼品
							</view>
							<!-- #endif -->
							<view v-if="customerinfo.is_typs==5 && item.process != 1" class="btn warnings" @click="accomplishs(item)">
								确认
							</view>
							<view v-if="item.is_allot != 1 && customerinfo.is_typs == 4" class="btn warnings" @click="toSales(item)">
								分配业务员
							</view>
							<view class="btn blues" @click="calls(item)">
								联系客户
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="info.length <= 0" mode="list" icon="../../../static/Empty/data_null.png" text="暂无记录"></u-empty>
				<u-picker :show="saleShow" ref="uPicker" :columns="saleList" keyName="nickname" @confirm="confirm" @cancel="saleShow = false"></u-picker>
				<u-overlay :show="show" @click="show = false">
					<view class="warp">
						<view class="rect" @tap.stop>
							<view class="message">
								<u--textarea v-model="remarks" placeholder="请输入内容" count ></u--textarea>
							</view>
							<view class="btn" @click="accomplish">
								提交
							</view>
						</view>
					</view>
				</u-overlay>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request5.js');
	/*#ifdef H5*/
	import wx from 'weixin-js-sdk';
	/*#endif*/
	export default {
		data() {
			return {
				show: false,
				loadding: true,
				saleShow: false,
				customerinfo: {},
				keyword: '',
				typeTags: [],
				type: 1,
				typeIndex: 0,
				saleList: [],
				apply_id: '',
				is_true: true,
				is_trues: true,
				info: [],
				bottom: true,
				page: 1,
				remarks: "",
				id: ''
			}
		},
		onLoad(e) {
			this.customerinfo = uni.getStorageSync('customerinfo');
			this.getData()
			this.getSaleList()
			/*#ifdef H5*/
			this.injectConfig()
			/*#endif*/
			this.getTagList()
		},
		//下拉刷新
		onReachBottom() {
			if (this.bottom == true) {
				this.page += 1
				this.getData()
			}
		},
		methods: {
			// 获取数据
			async getData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Customer/newlyTakes',
					data: {
						type: this.type,
						keyword: this.keyword,
						page: this.page
					},
					header: {
						'token': this.customerinfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					if (res.data.data !== undefined && res.data.data !== null && res.data.data.length > 0) {
						if (this.page == 1) {
							this.info = res.data.data
						} else {
							this.info = [...this.info, ...res.data.data]
						}
					} else {
						this.bottom = false
					}
				}
			},
			// 类型选择
			tagClick(e) {
				if (this.type != this.typeTags[e].id) {
					this.type = this.typeTags[e].id
					this.typeIndex = e
					this.loadding = true
					this.page = 1
					this.bottom = true
					this.info = []
					this.getData()
				}
			},
			// 搜索
			searchs() {
				this.loadding = true
				this.getData()
			},
			// 获取切换标签
			async getTagList() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Customer/getTagList',
					header: {
						'token': this.customerinfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					this.typeTags = res.data
					this.type = res.data[0].id
				}
			},
			// 获取业务员
			async getSaleList() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getSaleList',
					header: {
						'token': this.customerinfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					this.saleList = [res.data]
				}
			},
			// 分配业务员
			toSales(item) {
				this.apply_id = item.id
				this.saleShow = true
			},
			// 确定分配
			confirm(e) {
				this.saleShow = false
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定要分配给【'+e.value[0].nickname+'】吗？',
					success: function(res) {
						if (res.confirm) {
							that.divideSale(e.value[0].id)
						}
					}
				});
			},
			// 分配业务 - 方法
			async divideSale(id) {
				var that = this
				if (this.is_true) {
					this.is_true = false
					uni.showLoading({
						title: '加载中'
					});
					const {
						data: res
					} = await this.$myHttp5({
						url: 'Customer/takesAllot',
						data: {
							ids: this.apply_id,
							sid: id
						},
						header: {
							'token': this.customerinfo.token
						}
					});
					this.is_true = true
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					if (res.code == 1) {
						setTimeout(function() {
							that.getData()
						},1500)
					}
				}
			},
			// 微信公众号配置
			injectConfig() {
				let url = ''
				url = window.location.href.split('#')[0];
				uni.request({
					url: util.API_URL + '/api/v1/test',
					data: {
						url: url
					},
					success: (res) => {
						const data = res.data
						if (data.code == 1) {
							wx.config({
								debug: false, // 开启调试模式,
								appId: data.data.appId, // 必填，企业号的唯一标识
								timestamp: data.data.timestamp, // 必填，生成签名的时间戳
								nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
								signature: data.data.signature, // 必填，签名
								jsApiList: data.data.jsApiList, // 必填，需要使用的JS接口列表
							});
							wx.ready(() => {})
							wx.error(function(err) {});
						}
					},
					fail(err) {}
				});
			},
			// APP扫码 - 绑定礼品
			bindsGiftApp(item) {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.sn = res.result
						_this.bindGift(item)
					}
				});
			},
			// 调用微信扫码 - 绑定礼品
			bindsGift(item) {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						
						if (res.errMsg == 'scanQRCode:ok') {
							_this.sn = resultrow[1]
							_this.bindGift(item)
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			// 绑定终端 - 方法
			async bindTerminal(item) {
				if (this.sn == '' || this.sn == undefined) {
					uni.showToast({
						title: '操作失败，未检测到终端',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/bindTerminal',
					data: {
						apply_id: item.id,
						sn: this.sn
					},
					header: {
						'token': this.customerinfo.token
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 1) {
					this.getData()
				}
			},
			// 绑定礼品 - 方法
			async bindGift(item) {
				if (this.sn == '' || this.sn == undefined) {
					uni.showToast({
						title: '操作失败，未检测到终端',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Customer/bindGift',
					data: {
						ids: item.id,
						code: this.sn
					},
					header: {
						'token': this.customerinfo.token
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 1) {
					this.getData()
				}
			},
			// 联系客户
			async calls(item) {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Customer/phoneSave',
					data: {
						phone: item.allPhone
					},
					header: {
						'token': this.customerinfo.token
					}
				});
				if (res.code == 1) {
					uni.makePhoneCall({
						phoneNumber: res.phone
					});
				} else {
					uni.showToast({
						title: '电话占线中，请稍后再拨',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// 确定完成
			accomplishs(item) {
				this.id = item.id
				this.show = true
			},
			// 确定完成
			accomplish() {
				var that = this
				that.show = false
				uni.showModal({
					title: '提示',
					content: '是否已经确认反馈？',
					success: function(res) {
						if (res.confirm) {
							that.accomplishFun()
						} else {
							that.show = true
						}
					}
				});
			},
			// 确定完成 - 方法
			async accomplishFun() {
				if (this.is_trues) {
					this.is_trues = false
					uni.showLoading({
						title: '加载中'
					});
					const {
						data: res
					} = await this.$myHttp5({
						url: 'Customer/acActivityStands',
						data: {
							ids: this.id,
							remark: this.remarks
						},
						header: {
							'token': this.customerinfo.token
						}
					});
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
					this.is_trues = true
					if (res.code == 1) {
						this.getData()
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	
	.all-main {
		.main {
			.top {
				background-color: #ffffff;
				padding: 20rpx 20rpx 20rpx 20rpx;
				
				.type_tags {
					padding-top: 20rpx;
					width: 100%;
				}
			}
			
			.lists {
				.items {
					margin: 20rpx;
					padding: 20rpx;
					background-color: #ffffff;
					border-radius: 16rpx;
					.titles {
						display: flex;
						justify-content: space-between;
						padding-bottom: 20rpx;
						.lefts {
							display: flex;
							align-items: center;
							font-size: 30rpx;
							font-weight: bold;
							.phones {
								padding-left: 20rpx;
							}
						}
						.states {
							font-size: 24rpx;
							color: #ffffff;
							border-radius: 16rpx;
							padding: 10rpx 20rpx;
						}
						.reds {
							background-color: #fa3534;
						}
						.greens {
							background-color: #19be6b;
						}
					}
					
					.applys {
						.titles {
							font-size: 30rpx;
							font-weight: bold;
							padding: 16rpx 0;
						}
						
						.item-con {
							font-size: 28rpx;
							.product {
								padding: 10rpx 0;
								text {
									padding-right: 20rpx;
								}
							}
							.name {
								padding: 10rpx 0;
								text {
									padding-right: 20rpx;
								}
							}
							.address {
								padding: 10rpx 0;
							}
						}
					}
					
					.operations {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						padding: 20rpx 0;
					}
					
					.feedback {
						padding: 20rpx 0;
						color: #fa3534;
						.titles {
							font-size: 32rpx;
							font-weight: bold;
						}
						.cons {
							padding-top: 20rpx;
							font-size: 24rpx;
						}
					}
					
					.operation {
						display: flex;
						justify-content: space-between;
						.lefts {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: #c8c9cc;
						}
						.rights {
							padding-top: 20rpx;
							display: flex;
							justify-content: flex-end;
							.btn {
								padding: 10rpx 20rpx;
								font-size: 24rpx;
								color: #ffffff;
								border-radius: 16rpx;
								margin-left: 20rpx;
							}
							.blues {
								background-color: #2979ff;
							}
							.warnings {
								background-color: #ff9900;
							}
							.reds {
								background-color: #fa3534;
							}
						}
					}
				}
			}
			.warp {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
			
			.rect {
				width: 80%;
				background-color: #fff;
				padding: 30rpx;
				
				.btn {
					margin-top: 20rpx;
					background-color: #2979ff;
					color: #ffffff;
					text-align: center;
					padding: 30rpx;
					border-radius: 12rpx;
				}
			}
		}
	}
</style>
